<template>
    <div :class="{
        'panel':true,
        'today': day.today,
        'disable': !day.enable,
            }">
        <div :class="{
                   'head':true,
                   'head-today':day.today,
              }">
            <div class="date">
                {{day.date| FormatDay}}
            </div>
            <div v-if="day.enable && !day.date_before" class="edits">
                <el-button
                        type="text"
                        icon="el-icon-circle-plus-outline"
                        size="mini"
                    @click="onAddAdvert">新增</el-button>
            </div>
        </div>
        <div class="adverts">
            <div class="advert"
                v-for="(advert,index) in day.adverts"
            >
                <admin-advert
                        :ad="advert.advert"
                        :holder="!advert.have"
                    @delete="onAdvertDelete"
                ></admin-advert>
            </div>
        </div>


    </div>
</template>
<style lang="scss" scoped>
    .panel {
        min-height: auto;
        color: #303133;
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;

        &:hover > .head > .edits {
            visibility: visible;
        }

        .head-today {
            padding: 9px !important;
        }

        .head {

            padding: 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .date {
                font-weight: bolder;
            }

            .edits {
                display: flex;
                visibility: hidden;

                button {
                    padding: 0px;
                }
            }
        }

        .adverts {
            display: flex;
            flex-direction: column;
            padding-top: 10px;

            .advert {

            }

        }
    }

    .today {
        border: 2px solid lighten(#E6A23C,20);
    }

    .day-before {
        border: 2px solid lighten(#909399,10);
    }

    .day-after {
        border: 2px solid lighten(#409EFF,10);
    }

    .disable {
        color: #C0C4CC;
    }
</style>
<script lang="ts">
    import {Vue, Component,Prop} from 'vue-property-decorator'
    import {Api} from '@/api/meta'
    import Filter from '@/libs/filter'
    import AdminAdvert from './AdminAdvert'
    import moment from 'moment'

    @Component({
        name:"AdminCalendarDay",
        filters:Filter,
        components: {
            AdminAdvert
        }
    })
    export default class AdminCalendarDay extends Vue {

        @Prop({
            required:true,
        })
        days;

        @Prop({
            required:true,
            type:Number,
        })
        index;

        @Prop({
            required:true,
            type:String,
        })
        type;

        onAddAdvert() {

            let date = moment(this.day.date).utc().local().format("YYYY-MM-DD");
            this.$router.push({
                path:`/advert/view/new?date=${date}&type=${this.type}`
            })
        }

        day:Api.Meta.GetAdvertCalendarResponse_Day = {
          date:"",
          adverts: [],
          enable:false
        };

        created() {
            this.day = this.days.row[this.index];

        }

        mounted() {
            let td = this.$el.parentElement.parentElement;
            this.$el.style.height = td.clientHeight + 'px';
        }

        onAdvertDelete(id:any) {
            this.$emit('delete', id)
        }
    }
</script>

<style scoped>

</style>